<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Delaunay Triangulation</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <script type="text/javascript" src="../../d3.geom.js"></script>
    <style type="text/css">

@import url("../../lib/colorbrewer/colorbrewer.css");

path {
  stroke: #000;
  stroke-width: .5px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500;

var vertices = d3.range(500).map(function(d) {
  return [Math.random() * w, Math.random() * h];
});

var svg = d3.select("body")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "PiYG");

svg.append("svg:g")
  .selectAll("path")
    .data(d3.geom.delaunay(vertices))
  .enter().append("svg:path")
    .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

    </script>
  </body>
</html>
